<template>
  <a-card :bordered="false">
    <template #title>
      <a-space size="small">
        <LeftCircleTwoTone style="font-size: 20px" @click="$emit('showEtlTable')"></LeftCircleTwoTone>
        {{ props.etl.id ? '编辑  ==>  业务ID：' + props.etl.id : '添加' }}
      </a-space>
    </template>

    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 3 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-row>
        <a-col :span="8">
          <a-form-item
            label="业务名称"
            name="etlName"
            :label-col="{ span: 9 }"
            :rules="[{ required: true, message: '请输入业务名称!' }]"
          >
            <a-input v-model:value="formState.etlName" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="From数据源"
            name="fromDataSource"
            :label-col="{ span: 9 }"
            :rules="[{ required: true, message: '请输入From数据源!' }]"
          >
            <a-input v-model:value="formState.fromDataSource" allow-clear />
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item
            label="To数据源"
            name="toDataSource"
            :label-col="{ span: 8 }"
            :rules="[{ required: true, message: '请输入To数据源!' }]"
          >
            <a-input v-model:value="formState.toDataSource" allow-clear />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="业务表设置" name="etlConfig" :rules="[{ required: true, message: '请输入业务表设置!' }]">
        <VAceEditor
          v-model:value="formState.etlConfig"
          lang="json"
          theme="dracula"
          :options="{ useWorker: true, tabSize: 2 }"
          :min-lines="40"
          :max-lines="40"
          :wrap="true"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space size="middle">
          <a-button type="primary" html-type="submit">{{ props.etl.id ? '更新' : '添加' }}</a-button>
          <a-button type="primary" @click="$emit('showEtlTable')">返回</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { LeftCircleTwoTone } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { VAceEditor } from 'vue3-ace-editor';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-dracula';
import ace from 'ace-builds';
import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';

ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);

const props = defineProps<{
  etl: FormState;
}>();

const emit = defineEmits<{
  (e: 'showEtlTable'): void;
}>();

interface FormState {
  id: string;
  etlName: string;
  fromDataSource: string;
  toDataSource: string;
  etlConfig: string;
}

const defaultEtlConfig = {
  config: {
    batchSize: 10000,
  },
  tableList: [
    {
      fromTable: {
        querySql: '',
      },
      toTable: {
        beforeSql: '',
        toTableName: '',
        toTableColumnList: [],
        afterSql: '',
      },
    },
  ],
};

const formState = reactive<FormState>({
  id: props.etl.id,
  etlName: props.etl.etlName,
  fromDataSource: props.etl.fromDataSource,
  toDataSource: props.etl.toDataSource,
  etlConfig: props.etl.etlConfig
    ? JSON.stringify(JSON.parse(props.etl.etlConfig), null, 2)
    : JSON.stringify(defaultEtlConfig, null, 2),
});

function onFinish() {
  console.log('Success:', formState);
  emit('showEtlTable');
  message.success(formState.id ? '更新成功！' : '添加成功');
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

<style lang="less" scoped></style>
